<template>
	<view>
		<u-navbar :background="background">
			<view class="fw-b ft_16">
				预约
			</view>
			<view class="c-999" style="position: absolute;right: 15px;" @click="yuyuejilu">
				记录
			</view>
		</u-navbar>
		<view class="content">
			<view class="con_1 display just_space" @click="selectXM()">
				<view class="">
					预约项目
				</view>
				<view class="c-999">
					{{xiangmu}}
				</view>
			</view>
			<view class="con_1 display just_space" @click="show=true">
				<view class="">
					预约日期
				</view>
				<view class="c-999">
					{{riqi}}
				</view>
			</view>
			<view class="con_1 display just_space" @click="show1=true">
				<view class="">
					预约时段
				</view>
				<view class="c-999">
					{{shiduan}}
				</view>
			</view>
		</view>
		<view class="confirmBtn" @click="confrimYY">
			确认预约
		</view>
		
		<!-- 日期弹窗 -->
		<u-picker mode="time" v-model="show" @confirm="confirmRQ" confirm-color="#ed9521"></u-picker>
		<!-- 开始时间弹窗 -->
		<u-picker mode="time" v-model="show1" :params="params" title="开始时间" @confirm="confirmKSSJ"  confirm-color="#ed9521"></u-picker>
		<!-- 结束时间 -->
		<u-picker mode="time" v-model="show2" :params="params" title="结束时间" @confirm="confirmJSSJ"  confirm-color="#ed9521"></u-picker>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				background:{backgroundColor: '#ffffff',},
				xiangmu:"请选择",
				riqi:"请选择",
				shiduan:"请选择",
				startTime:"", //开始时间
				endTime:"", //结束时间
				
				show:false, //日期
				show1:false, //开始时间
				show2:false, //结束时间
				params: {
					year: false,
					month: false,
					day: false,
					hour: true,
					minute: false,
					second: false
				},
				
			};
		},
		methods:{
			yuyuejilu(){ //预约记录
				uni.navigateTo({
					url:"../mine/others/yuyueJilu"
				})
			},
			selectXM(){ //选择项目
				let that=this
				let list=['项目一', '项目二']
				uni.showActionSheet({
					itemList: list,
					success: function (res) {
						that.xiangmu=list[res.tapIndex]
					},
					fail: function (res) { console.log(res.errMsg); }
				});
			},
			confirmRQ(e){ //确定日期
				console.log(e);
				this.riqi=e.year+"-"+e.month+"-"+e.day
			},
			confirmKSSJ(e){ //开始时间
				console.log(e);
				this.startTime=e.hour
				this.show2=true
			},
			confirmJSSJ(e){ //结束时间
				console.log(e);
				this.shiduan=this.startTime+":00-"+ e.hour+":00"
			},
			confrimYY(){ //确认预约
				uni.navigateTo({
					url:"yuyueSuccess"
				})
			},
			
		},
		
	}
</script>

<style lang="scss">
page{
	background-color: #fafafa;
}
.content{
	padding-top: 5px;
	.con_1{
		padding: 15px;background-color: #FFFFFF;margin-bottom: 5px;
	}
}
.confirmBtn{
	background: linear-gradient(90deg, #F1A421 0%, #E4741F 100%);margin: 0 20px;padding: 15px 0;color: #FFFFFF;border-radius: 30px;text-align: center;position: fixed;bottom: 100px;width: 345px;
}

</style>
